
<%@page contentType="text/html;charset=UTF-8" %>
<html>
    <head>
        <title>Welcome to Grails</title>
		<meta name="layout" content="main" />
      <script type="text/javascript" src="http://jquery.com/src/jquery-latest.js"></script>
        <script type="text/javascript" charset="UTF-8">
          function showMap(position) {
            alert(position.coords.latitude +' - '+ position.coords.longitude );
            // Show a map centered at (position.coords.latitude, position.coords.longitude).
            $("#mapGeo").append('<br/>'+ position.coords.latitude +' - '+ position.coords.longitude + '<br/>');  
          };

          function errorCallback(error) {
            alert('Ha ocurrido un error intentando posicionar. ' +error.code);
          };

          // One-shot position request.
          navigator.geolocation.getCurrentPosition(showMap, errorCallback);

          if (navigator.geolocation) {
          /* geolocation is available */
        	} else {
        	  alert("I'm sorry, but geolocation services are not supported by your browser.");
              document.getElementById('mapGeo').style('display:none;');
        	}

          function vigilarPosicion() {
             navigator.geolocation.watchPosition(showMap);
          }

          function cargarMapa(position) {
            $("#enlaceMapa").attr("href", "http://maps.google.es/maps?f=q&source=s_q&hl=es&geocode=&q=" +position.coords.latitude +","+ position.coords.longitude);
            $("#enlaceMapa").html("Ver posición en el mapa");
            //window.open("http://maps.google.es/maps?f=q&source=s_q&hl=es&geocode=&q=" +position.coords.latitude +",+"+ position.coords.longitude);
          }

          function verMapa() {
            //http://maps.google.es/maps?f=q&source=s_q&hl=es&geocode=&q=40.3921511,+-3.7395&aq=&sll=40.396764,-3.713379
            navigator.geolocation.watchPosition(cargarMapa);
          }

        </script>
     </head>
    <body>
    <div class="panelBody">
      <g:if test="${session.usuario}">
            ${session.usuario.name}<br/>
            ${session.usuario.screenName}<br/>
            <img src="${session.usuario.url}"/><br/>

            <g:link controller="home" action="logOut">Log out</g:link>

        </g:if>
        <g:else>
             <g:link controller="home" action="loginTwitter">Logueate</g:link>
        </g:else>
      </div>

      <div id="mapGeo">
         <a href="javascript:vigilarPosicion();">Pulse aqui si quieres ser geolocalizado</a>
      </div>
      <div id="verMapa">
          <br/><br/>
          <a href="javascript:verMapa();">Pulsa aqui para que aparezca dentro un mapa de google con la posición</a>
          <br/><a id="enlaceMapa" href="javascript:none" target="_blank"></a>
      </div>
  </body>
</html>